<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用正则表达式验证注册页面</title>
    <link rel="stylesheet" href="css/register.css">
    <script src="js/jquery-1.12.4.js"></script>
</head>

<body>
<section id="register">
    <div><img src="images/logo.jpg" alt="logo"/><img src="images/banner.jpg" alt="banner"/></div>
    <h1 class="hr_1">新用户注册</h1>
    <form action="" method="post" name="myform" id="myform">
        <dl>
            <dt>用户名：</dt>
            <dd><input id="user" type="text" required/>
                <div id="user_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>密码：</dt>
            <dd><input id="pwd" type="password"/>
                <div id="pwd_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>确认密码：</dt>
            <dd><input id="repwd" type="password"/>
                <div id="repwd_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>电子邮箱：</dt>
            <dd><input id="email" type="text"/>
                <div id="email_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>手机号码：</dt>
            <dd><input id="mobile" type="text"/>
                <div id="mobile_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>生日：</dt>
            <dd><input id="birth" type="text"/>
                <div id="birth_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>&nbsp;</dt>
            <dd><input name="" type="image" src="images/register.jpg" class="btn"/></dd>
        </dl>
    </form>
</section>
<script type="text/javascript">

    $(function () {
        $("#myform").submit(function () {
			//年份 1900-2016
			//1900 - 1999
			//2000 - 2009
			//2010 - 2016
			//1999-10-10
			if(!/^((200|19[0-9])+\d|201[0-6])+-\d{2}-\d{2}$/.test($("#birth").val())){
				$("#birth_prompt").text("生日年份在1900-2016之间")
				return false;
			}
			$("#birth_prompt").text("")
			var unameReg = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;//用户名
			if(!unameReg.test($("#user").val())){
				$("#user_prompt").text("用户名由英文字母和数字组成的4-16位字符，以字母开头")
				return false;
			}
			if(!/^[a-zA-Z0-9]{4,10}$/.test($("#pwd").val())){
				$("#pwd_prompt").text("密码由英文字母和数字组成的4-10位字符")
				return false;
			}
			// if(!/1\d{10}/.test()){ //手机
			// }
            return false;
        })
    })
</script>
</body>
</html>
